<template>
  <div>
    <el-card>
      <el-row :gutter="50">
        <el-col :span="11">
          <div id="div2"style="width: 600px;height: 400px;margin-right: 20px"  ></div>
        </el-col>
        <el-col :span="11">
          <div id="div3" style="width: 600px;height: 400px;margin-left: 20px"></div>
        </el-col>
        <el-col :span="11">
          <div id="main" style="width: 600px;height: 400px;margin-right: 20px" ></div>
        </el-col>
        <el-col :span="11">
          <div id="main1" style="width: 600px;height: 400px;margin-left: 20px" ></div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: "Index",
    data(){
      return{
        customerStat:{
          customerName:[],
          orderNum:[]
        },
        orderStatistics:{
          orderCode:[],
          orderPrice:[]
        },
        userStatistics:{
          userName:[],
          userPrice:[]
        },
        technologyStat:[],
        technologyName:[],
      }
    },
    methods:{
      //客户
      customer(){
        var myChart = this.$echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
          title: {
            text: '客户订单数据',
          },
          tooltip: {},
          legend: {
            data:['数量']
          },
          xAxis: {
            data: this.customerStat.customerName
          },
          yAxis: {},
          series: [{
            name: '数量',
            type: 'bar',
            data: this.customerStat.orderNum
          }]
        };
        myChart.setOption(option);
      },
      //订单
      order:function () {

        var order = this.$echarts.init(document.getElementById('div2'));

        var option = {
          title: {
            text: '订单金额统计'
          },
          xAxis: {
            type: 'category',
            data:this.orderStatistics.orderCode
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data:this.orderStatistics.orderPrice,
            type: 'line'
          }]
        };
        order.setOption(option);
      },
      xiaoshou:function () {

        var xiaoshou = this.$echarts.init(document.getElementById('div3'));
        var option = {
          title: {
            text: '销售本月销售额占比',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          }, legend: {
            orient: 'vertical',
            left: 'left',
            data: this.userStatistics.userName
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: this.userStatistics.userPrice,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        xiaoshou.setOption(option);
      },
      technology(){
        var myChart = this.$echarts.init(document.getElementById('main1'));
        var option = {
          title: {
            text: '工艺数据统计',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            top:50,
            left: 10,
            data: this.technologyName
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: this.technologyStat
            }
          ]
        };
        myChart.setOption(option);

      }
    },
    mounted() {
      this.$http.post("/information/pi-customer/getCustomerNum").then((res)=>{
        this.customerStat.customerName=res.data.result.customerStat.customerName
        this.customerStat.orderNum=res.data.result.customerStat.num
        this.customer()
      })
      this.$http.post("order/getOrderPrice").then((res)=>{
          if(res.data.success){
            this.orderStatistics.orderCode=res.data.result.code;
            this.orderStatistics.orderPrice=res.data.result.priceIt;
            console.log(this.orderStatistics)
            this.order();
          }else{
            this.$message.error(res.data.message);
          }

        }
      )
      this.$http.post("order/getxiaoshoue").then((res)=>{
        this.userStatistics.userName=res.data.result.userName;
        this.userStatistics.userPrice=res.data.result.userPrice;
        this.xiaoshou()
      })


      this.$http.post("information/pi-customer/getTechnologyNum").then((res)=>{
        this.technologyStat=res.data.result
        for (var i=0;i<res.data.result.length;i++){
          this.technologyName[i]=res.data.result[i].name
        }

        this.technology()
      })


    }
  }
</script>

<style scoped>

</style>
